<template>
  <div>
    <HeaderSearch @Search="ToDoSearch" @doSearch="toSearch" @showHistory="ifshow" :searchValue="searchValue"></HeaderSearch>
    <div v-show="showHis" class="SearchHistory">
      <div class="title">搜索历史</div>
      <div @click="setSearchValue">
        <span class="oneitem" v-for="(item,idx) in searchList" :key="idx">
        {{item}}
      </span>
      </div>
    </div>
<!--    <div v-if="showErr" class="err" style="height: 100px;line-height: 100px;text-align: center;font-weight: bold">没有找的你需要的商品！！</div>-->
    <div>
    <water-fall data="100" :searchValue="searchV" />
    </div>
  </div>
</template>
<script>
import WaterFall from "@/components/WaterFall";
import HeaderSearch from "@/components/HeaderSearchInput.vue";
export default {
  name:"SearchList",
  components:{HeaderSearch,WaterFall},
  data(){
    return{
      showHis:true,
      searchValue:"",
      shopList:[],
      searchV:"",
      showSearchList:false,
      showErr:false,
      searchList:['香蕉','毛衣','ipad','iphone8','裤子']
    }
  },
  destroyed() {
  },
  methods:{
    ifshow(val) {
      this.showHis=val.show
      if(val.show===true){
        this.showErr=false
      }
    },
    ToDoSearch(){
     this.searchV=this.searchValue

    },
    toSearch(val){
     this.searchValue=val.searchVal
      if (this.shopList.length===0){
        this.showErr=true
      }else {
        this.showErr=false
      }
    },
    setSearchValue($event){
    this.searchValue=$event.target.innerHTML
    }
  }
}
</script>
<style scoped>
.SearchHistory{
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background-color:#eee;
}
.title{
  padding-left: 15px;
  font-weight: 300;
  font-size: 16px;
}
.oneitem{
  padding: 5px 8px;
  border-radius: 10px;
  background-color: #ddd;
  display: inline-block;
  color: #333;
  font-weight: bold;
  margin: 4px 5px;
}
</style>
